<script setup lang="ts">
import { ref, watch } from "vue";
import { ContainerEvent, Position } from "./packages";

const dragZoomRef = ref();

const position = ref(new Position(10, 10));

watch(position, (v) => {
  console.log(v);
});

const containerOnMove = (pos: ContainerEvent) => {
  console.log("containerOnMove", pos);
};

const containerOnMoveFinished = (pos: ContainerEvent) => {
  console.log("containerOnMoveFinished", pos);
};

const containerOnZoom = (pos: ContainerEvent) => {
  console.log("containerOnZoom", pos);
};
</script>

<template>
  <v3-drag-zoom-container
    class="container"
    ref="dragZoomRef"
    :auto-resize="true"
    :follow-pointer="true"
    align="auto"
    style="width: 50%; height: 480px; margin: 100px auto"
    @onMove="containerOnMove"
    @onMoveFinished="containerOnMoveFinished"
    @onZoom="containerOnZoom"
  >
    <img src="/src/assets/test1.jpeg" alt="test img" />
    <v3-drag-zoom-item
      style="width: 100px; height: 100px; background-color: darkred"
      :draggable="true"
      v-model:position="position"
    ></v3-drag-zoom-item>
  </v3-drag-zoom-container>
</template>

<style scoped lang="less">
.container {
  background-color: #f0f0f0;
}
</style>
